<template>
  <div
    class="at-file-list"
    v-for="(item, i) in fileList"
    :key="i"
  >
    <div class="attach">
      <div class="img-box">
        <n-image
          ref="previewInst"
          :src="extImg(item)"
          :fallback-src="OtherImg"
          :preview-src="previewSrc"
          :preview-disabled="previewDisable"
          style="width: 100%; height: 100%"
        />
      </div>

      <NEllipsis style="padding: 0 15rem; font-size: 14rem; max-width: 100%">
        {{ item.name }}
      </NEllipsis>

      <NSpace>
        <NButton
          type="primary"
          class="btn"
          ghost
          @click="preview(item)"
        >
          <n-icon
            size="14"
            style="margin-right: 5rem"
          >
            <VisibilityOutlined />
          </n-icon>
          预览
        </NButton>
        <NButton
          type="primary"
          class="btn"
          ghost
          @click="downLoad(item)"
          :loading="downLoading"
        >
          <n-icon size="14">
            <VerticalAlignBottomFilled />
          </n-icon>
          下载
        </NButton>
      </NSpace>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  NButton,
  NSpace,
  NIcon,
  NImage,
  useMessage,
  NEllipsis,
  type UploadFileInfo
} from 'naive-ui'
import { VisibilityOutlined, VerticalAlignBottomFilled } from '@vicons/material'
import { useRouter } from 'vue-router'
import { nextTick, ref } from 'vue'

import ExcelImg from '@/assets/images/excel.png?url'
import OtherImg from '@/assets/images/other.png?url'
import WordImg from '@/assets/images/word.png?url'
import ZipImg from '@/assets/images/zip.png?url'
import PdfImg from '@/assets/images/pdf.png?url'

withDefaults(defineProps<{ fileList: UploadFileInfo[] }>(), {
  fileList: () => []
})

const router = useRouter()
const message = useMessage()

const imgExt = ['jpeg', 'gif', 'svg', 'png', 'pjpeg', 'jpg']
const excelExt = ['xlsx', 'xls']
const wordExt = ['docx']
const zipExt = ['zip']
const pdfExt = ['pdf']

const getExtFromName = (name: string) => {
  const ext = name.split('.').pop()
  return ext ? ext.toLowerCase() : ''
}

const extImg = ({ name, url }: UploadFileInfo) => {
  const type = getExtFromName(name)
  if (!type) return OtherImg
  if (imgExt.includes(type)) return url!
  if (excelExt.includes(type)) return ExcelImg
  if (wordExt.includes(type)) return WordImg
  if (zipExt.includes(type)) return ZipImg
  if (pdfExt.includes(type)) return PdfImg
  return OtherImg
}

const previewInst = ref<HTMLElement[] | null>()
const previewSrc = ref<any>(null)
const previewDisable = ref(true)
const preview = async (row: UploadFileInfo) => {
  previewDisable.value = false
  const type = getExtFromName(row.name)

  if (imgExt.includes(type)) {
    previewSrc.value = row.url
    nextTick(() => previewInst.value?.[0]?.click())
    return
  }

  if (excelExt.includes(type) || pdfExt.includes(type) || wordExt.includes(type)) {
    previewDisable.value = true
    router.push({ path: '/OA/Common/AttachContent', query: { id: row.id } })
    return
  }

  message.error('暂不支持该类型预览功能')
}

const downLoading = ref(false)
const downLoad = async (row: UploadFileInfo) => {
  try {
    downLoading.value = true
    const a = document.createElement('a')
    const bold = await fetch(row.url!).then((e) => e.blob())
    a.href = window.URL.createObjectURL(bold)
    a.download = row.name
    a.click()
    window.URL.revokeObjectURL(a.href)
    downLoading.value = false
    message.success('下载附件成功')
  } catch {
    downLoading.value = false
    message.error('下载附件失败')
  }
}
</script>

<style scoped lang="scss">
.at-file-list {
  display: flex;
  flex-direction: column;
}

.attach {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 168rem;
  height: 140rem;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  margin-right: 15rem;

  .img-box {
    width: 50rem;
    height: 50rem;
    background-color: #ebeceb;
    overflow: hidden;
  }

  .btn {
    display: flex;
    justify-content: center;
    width: 63rem;
    height: 24rem;
    font-size: 14rem;
    padding: 0;
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
